<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">辅助间隔</h3>
    <el-form :model="spaceForm" ref="spaceForm" label-width="76px">
      <div class="set-part mt20">
        <el-form-item label="空白高度" prop="height">
          <div class="flex">
            <el-slider class="row-slider" :min="1" :max="100" v-model.number="spaceForm.height"></el-slider>
            <el-input class="row-input" v-model.number="spaceForm.height"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="分割线" prop="borderShow">
          <div class="flex">
            <div class="val-show flex-1">{{spaceForm.borderShow?'显示':'不显示'}}</div>
            <el-checkbox v-model="spaceForm.borderShow"></el-checkbox>
          </div>
        </el-form-item>
        <template v-if="spaceForm.borderShow">
          <el-form-item label="选择样式" prop="borderStyle">
            <div class="flex">
              <div class="val-show flex-1">{{spaceForm.borderStyle | filterRadio(borderStyleOption)}}</div>
              <en-radio-tab
                :optionsData="borderStyleOption"
                :defaultData="spaceForm.borderStyle"
                v-model="spaceForm.borderStyle">
              </en-radio-tab>
            </div>
          </el-form-item>
          <el-form-item label="页面间距" prop="pagePadding">
            <div class="flex">
              <el-slider class="row-slider" :min="0" :max="30" v-model.number="spaceForm.pagePadding"></el-slider>
              <el-input class="row-input" v-model.number="spaceForm.pagePadding"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="分割颜色" prop="borderColor">
            <div class="flex">
              <div class="val-show flex-1">{{spaceForm.borderColor}}</div>
              <el-color-picker v-model="spaceForm.borderColor"></el-color-picker>
            </div>
          </el-form-item>
        </template>
      </div>
    </el-form>
    <el-button type="primary" @click="handleConfirm">数据提交</el-button>
  </div>
</template>

<script>
  import mixin from '../../mixin';

  export default {
    name: 'EnSpacePicker',
    mixins: [mixin],
    props: {
      show: {
        type: Boolean,
        default: false
      },
      // 默认数据
      defaultData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        visible: this.show,
        textForm: {},
        spaceForm: {},

        borderStyleOption: [{
          value: 'solid',
          label: '实线',
          icon: 'fonticon-border-solid'
        },{
          value: 'dashed',
          label: '虚线',
          icon: 'fonticon-border-dashed'
        },{
          value: 'dotted',
          label: '点线',
          icon: 'fonticon-border-dotted'
        }],
      }
    },
    watch: {
      show(newVal) {
        this.visible = newVal
      },
      defaultData(newVal) {
        if (!newVal) {
          return;
        };
        let _showData = JSON.parse(JSON.stringify(newVal));
        this.spaceForm = {
          ..._showData.style
        };
      }
    },
    methods: {
      handleConfirm() {
        this.$refs['spaceForm'].validate((valid) => {
          if (valid) {
            this.$emit('confirm', this.spaceForm);
          } else {
            this.$message.error('表单填写有误，请核对！')
            return false
          }
        })
      }
    }
  }
</script>